<html>
  <head>
    <title>
      媒体查询
    </title>
  </head>
  <body>
    <script>
      /*
              一、总览

                        MediaQueryObserver对象，用于监听页面 meida query 状态的变化，如姐卖你的宽高是不是在某个指定的范围内。

                        ★、Observer ：  观察者
      */

      /*
              二、uni.createMediaQueryObserver([this])

                        1、概述

                                    创建并返回一个   MediaQueryObserver 对象实例

                        2、this说明：

                                    自定义组件实例。小程序端不支持此参数，传入仅为抹平写法差异

                        3、平台兼容性

                                    App	                      HarmonyOS Next	微信小程序	         H5	        支付宝小程序	qq小程序	百度小程序	抖音小程序	飞书小程序	360小程序	快应用	元服务	小红书小程序
                                    2.8.12+，app-vue	        HBuilderX 4.31	 基础库 2.11.1+	      √         	√	            √       	√	      √     	    x	          √        x       x        x

                              ★、注意：支付宝小程序、qq小程序、百度小程序、抖音小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。
      */

      /*
            三、MediaQueryObserver 对象的方法列表

                      1、方法列表

                              方法	                                                                    说明

                          ①、MediaQueryObserver.observe(Object descriptor, function callback)	        开始监听页面 media query 变化情况

                          ②、MediaQueryObserver.disconnect()	                                        停止监听，回调函数将不再触发


                      2、Object descriptor

                                              属性名	            类型	  默认值	    必填	                说明

                                          ①、minWidth	          number		            否	      页面最小宽度（ px 为单位）

                                          ②、maxWidth	          number		            否	      页面最大宽度（ px 为单位）

                                          ③、width	            number		            否	      页面宽度（ px 为单位）

                                          ④、minHeight	        number		            否	      页面最小高度（ px 为单位）

                                          ⑤、maxHeight	        number		            否	      页面最大高度（ px 为单位）

                                          ⑥、height	            number		            否	      页面高度（ px 为单位）

                                          ⑦、orientation	      string		            否	      屏幕方向（ landscape 或 portrait ）

                      3、MediaQueryObserver.observe 回调函数包含一个参数

                                  参数	      类型	      说明
                                  matches	    boolean	    页面的当前状态是否满足所指定的 media query
      */

      /*
            四、代码示例

                                      <template>
                                          <view class="content">
                                              <view class="">
                                                  要求页面最小宽度 375px， 且页面宽度最大 500px，是否匹配: {{matches}}
                                              </view>
                                              <view>
                                                  要求屏幕方向为纵向，是否匹配: {{landscape}}
                                              </view>
                                          </view>
                                      </template>
                                      <、script>
                                        let landscapeOb
                                        export default {
                                            data() {
                                                return {
                                                    matches: false,
                                                    landscape: false,
                                                    mediaQueryOb: null
                                                }
                                            },
                                            onLoad() {

                                            },

                                            // 和 UI 相关的 api 在组件 mountd 后执行
                                            mounted() {
                                                this.testMediaQueryObserver()
                                                this.landscapeObserver()
                                            },

                                            methods: {
                                                testMediaQueryObserver() {
                                                    this.mediaQueryOb = uni.createMediaQueryObserver(this)

                                                    this.mediaQueryOb.observe({
                                                        minWidth: 375,  //页面最小宽度 375px
                                                        maxWidth: 500  //页面宽度最大 500px
                                                    }, matches => {
                                                        this.matches = matches;
                                                    })
                                                },
                                                landscapeObserver() {
                                                    landscapeOb = uni.createMediaQueryObserver(this)
                                                    landscapeOb.observe({
                                                        orientation: 'landscape'  //屏幕方向为纵向
                                                    }, matches => {
                                                            this.landscape = matches
                                                    })
                                                },
                                                destroyed () {
                                                    this.mediaQueryOb.disconnect()  //组件销毁时停止监听
                                                    landscapeOb.disconnect()
                                                }
                                            }
                                        }
                                    </、script>

                                    <style>
                                        .content {
                                            text-align: center;
                                            height: 400upx;
                                        }
                                    </style>
      */
    </script>
  </body>
</html>